{% load static %}
{% load manager_category_tags %}
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>内容管理</title>
    <link rel="stylesheet" href="{% static '/public/css/ui.css' %}">
    <link rel="stylesheet" href="{% static '/public/admin/css/layout.css' %}">
    <script>var api_url = "{U('upload/imagelist','type=3&multiple=1')}";</script>
    <script src="{% static '/public/js/jquery.js' %}"></script>
    <script src="{% static '/public/js/ui.js' %}"></script>
    <script src="{% static '/public/js/dropzone.js' %}"></script>
    <script src="{% static '/public/js/sortable.min.js' %}"></script>
    <script src="{% static '/public/tinymce/tinymce.min.js' %}"></script>
    <script src="{% static '/public/admin/js/base.js' %}"></script>
    
</head>

<body>
    <div class="position">当前位置：<a href="/manager/content/lists/">内容管理</a>{{classid|get_page_postion|safe}}</div>
    <div class="border">
        <!---->
        <form class="ui-form" method="post">
            <div class="ui-form-group ui-row">
                <label class="col-left ui-col-form-label">组图：</label>
                <div class="col-right col-right-full">
                    <!---->
                    <div class="ui-btn-group ui-mt-sm">
                        <a class="ui-btn-group-item fm-choose ui-icon-cloud-upload" data-name="piclist"
                            data-url="/manager/upload/imageupload?type=3&multiple=1" data-type="0" data-multiple="1"
                            title="上传">上传</a>
                        <a class="ui-btn-group-item fm-choose ui-icon-select" data-name="piclist"
                            data-url="/manager/upload/imagelist?type=1&multiple=1" data-type="0" data-multiple="1"
                            title="选择">选择</a>
                    </div>
                    <div class="imagelist">
                        <ul id="list_piclist">
                            <input type="hidden" name="piclist" id="piclist" value="">
                            {% if picdata %}
                            {% for pic in picdata %}
                            <li num="{{pic.id}}">
                                <div class="preview">
                                    <input type="hidden" name="piclist_{{pic.id}}_image" value="{{pic.image}}">
                                    <u href="{{pic.image}}" class="ui-lightbox"
                                        data-title="{{pic.desc}}"><img src="{{pic.image}}" /></u>
                                    <a href="javascript:;" class="fm-choose" data-name="preview"
                                        data-url="{U('upload/imageupload','type=1&multiple=1')}" data-type="0"
                                        data-multiple="0" title="选择"><i class="ui-icon-image ui-mr-sm"></i>换图</a>
                                </div>
                                <div class="intro">
                                    <textarea name="piclist_{{pic.id}}_desc" class="ui-form-ip"
                                        placeholder="图片描述...">{{pic.desc}}</textarea>
                                </div>
                                <div class="action"><a href="javascript:;" class="img-left"><i
                                            class="ui-icon-left"></i>左移</a><a href="javascript:;" class="img-right"><i
                                            class="ui-icon-right"></i>右移</a><a href="javascript:;" class="img-del"><i
                                            class="ui-icon-delete"></i>删除</a></div>
                            </li>
                            {% endfor %}
                            {% endif %}
                        </ul>
                    </div>
                    <!---->
                </div>
            </div>
            <div class="ui-form-group ui-row">
                <label class="col-left ui-col-form-label">内容：</label>
                <div class="col-right-full">
                    <textarea name="content" class="tinymce-textarea">{{ content }}</textarea>
                </div>
            </div>

            <div class="ui-form-group ui-row">
                <label class="col-left ui-col-form-label"></label>
                <div class="col-right">
                    {% csrf_token %}
                    <button type="submit" class="ui-btn ui-btn-info ui-mr-sm">保存</button>
                    {% if isdel %}
                    <button type="button" class="ui-btn isdel"
                        data-url="{U('delpage','classid='.$classid.'')}">删除内容</button>
                    {% else %}
                    <button type="button" class="ui-btn ui-back">返回</button>
                    {% endif %}
                </div>
            </div>

        </form>
        <!---->
    </div>
    <script src="{% static '/public/admin/js/tinymce_auto.js' %}"></script>
    <script>
        $(function () {
            Sortable.create($("#list_piclist")[0], { animation: 400 });

            $(".ui-form").form(
                {
                    type: 2,
                    result: function (form) {
                        let piclist=[];
                        $("#list_piclist li").each(function(){
							var num = $(this).attr("num");
                            console.log($('textarea[name=piclist_'+num+'_desc]').val());
                            let picitem = {'id':num, 'image': $('input[name=piclist_'+num+'_image]').val(), 'desc':$('textarea[name=piclist_'+num+'_desc]').val()?$('textarea[name=piclist_'+num+'_desc]').val():''};
                            if(piclist.length){
                                piclist.push(picitem);
                            }else{
                                piclist=[picitem];
                            }
						});
                        $('#piclist').val(JSON.stringify(piclist));
                        $.ajax(
                            {
                                type: 'post',
                                cache: false,
                                dataType: 'json',
                                url: '/manager/content/page/?classid={{classid}}',
                                data: $(form).serialize(),
                                error: function (e) { alert(e.responseText); },
                                success: function (d) {
                                    if (d.state == 'success') {
                                        wmcms.success(d.msg);
                                        setTimeout(function () { location.href = '/manager/content/page/?classid={{classid}}'; }, 1500);
                                    }
                                    else {
                                        wmcms.error(d.msg);
                                    }
                                }
                            });
                    }
                });
            $(".isdel").click(function () {
                var url = $(this).attr("data-url");
                $.dialog(
                    {
                        'title': "操作提示",
                        'text': "确定要删除？不可恢复！",
                        'oktheme': 'ui-btn-info',
                        'ok': function (e) {
                            $.ajax(
                                {
                                    url: url,
                                    type: 'post',
                                    dataType: 'json',
                                    error: function (e) { alert(e.responseText); },
                                    success: function (d) {
                                        e.close();
                                        if (d.state == 'success') {
                                            wmcms.success(d.msg);
                                            setTimeout(function () { location.href = '{THIS_LOCAL}'; }, 1000);
                                        }
                                        else {
                                            wmcms.error(d.msg);
                                        }
                                    }
                                });
                        }
                    });
            });

        });
    </script>
</body>

</html>